<template>
  <div class="register-emergency-contact">
		<div class="v-identity">
      <v-emergency @change-params="changeParams1($event)" num="1" @father-touch="childChangeData1($event)" ref="changeData1"></v-emergency>
      <v-emergency @change-params="changeParams2($event)" num="2" @father-touch="childChangeData2($event)" ref="changeData2" style="margin-top:60px"></v-emergency>
		</div>
		<div class="next">
			<button type="button" class="btn btn-orange" :disabled="isNextDisabled" @click="submit"><span :class="{ 'btn-loading': isLoading }">{{ $t('message.submit') }}</span></button>
		</div>
  </div>
</template>
<script>
import VEmergency from '@/components/base/VEmergency'

export default {
  name: 'RegisterEmergencyContact',
  components: {
    VEmergency
  },
  data () {
    return {
      // 紧急联系人1数据
      emergencyInfo1: {
        firstName: '',
        lastName: '',
        age: '',
        relation: '',
        phoneNum: '',
        job: ''
      },
      // 紧急联系人2数据
      emergencyInfo2: {
        firstName: '',
        lastName: '',
        age: '',
        relation: '',
        phoneNum: '',
        job: ''
      },
      isNextDisabled: true, // 是否允许下一步
      isParams1Disabled: true, // 紧急联系人1是否通过表单校验
      isParams2Disabled: true, // 紧急联系人2是否通过表单校验
      isLoading: false // 是否显示按钮的loading图标
    }
  },
  watch: {
    // 观察两组数据是否同时成立，若成立允许点击下一步
    isParams1Disabled (val) {
      if (val || this.isParams2Disabled) {
        this.isNextDisabled = true
      } else {
        this.isNextDisabled = false
      }
    },
    isParams2Disabled (val) {
      if (val || this.isParams1Disabled) {
        this.isNextDisabled = true
      } else {
        this.isNextDisabled = false
      }
    }
  },
  methods: {
    // 从组件内获取数据
    changeParams1 (val) {
      if (val === 'no') {
        this.isParams1Disabled = true
      } else {
        this.emergencyInfo1 = val
        this.isParams1Disabled = false
      }
    },
    changeParams2 (val) {
      if (val === 'no') {
        this.isParams2Disabled = true
      } else {
        this.emergencyInfo2 = val
        this.isParams2Disabled = false
      }
    },
    // 下一步
    submit () {
      if (this.isLoading) {
        return
      }
      var data = {
        name1: this.emergencyInfo1.firstName,
        surname1: this.emergencyInfo1.lastName,
        age1: this.emergencyInfo1.age,
        relation1: this.emergencyInfo1.relation,
        tel1: this.emergencyInfo1.phoneNum,
        post1: this.emergencyInfo1.job,
        name2: this.emergencyInfo2.firstName,
        surname2: this.emergencyInfo2.lastName,
        age2: this.emergencyInfo2.age,
        relation2: this.emergencyInfo2.relation,
        tel2: this.emergencyInfo2.phoneNum,
        post2: this.emergencyInfo2.job
      }
      this.isLoading = true
      this.$ajax.addEmergency(data).then((res) => {
        this.isLoading = false
        if (res.code === 200) {
          this.$router.push({ path: 'success' })
        } else if (res.code === 201) {
          // alertText: '用户没有登录'
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.NoLogin')
          })
        } else if (res.code === 202) {
          // alertText: '已经紧急联系人，无需重复添加'
          this.$store.commit('alert', {
            switch: true,
            alertText: res.msg
          })
        } else if (res.code === 203 || res.code === 204 || res.code === 205) {
          // alertText: '参数错误，如缺少参数、url格式不正确'
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.paramFault')
          })
        }
      }).catch(() => {
        this.isLoading = false
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    // 触发子组件函数
    childChangeData1 () {
      this.$refs.changeData2.changeData()
    },
    childChangeData2 () {
      this.$refs.changeData1.changeData()
    }
  }
}
</script>
<style scoped>
.register-emergency-contact {
  width: 605px;
  margin: 60px auto 0;
  padding-bottom: 100px;
}

.v-identity {
  margin-top: 60px;
}

.next {
  text-align: center;
  margin-top: 100px;
}

.next button:disabled {
  cursor: not-allowed;
  background: #d7d7d7;
}

.btn {
  width: 376px;
  height: 48px;
  font-size: 16px;
  border-radius: 2px;
  cursor: pointer;
}

.error-tips {
  margin-bottom: 12px;
}
</style>
